<template>
    <div>
      <!-- 筛选条件 -->
      <a-form layout="inline">
        <a-form-item label="所属区域">
          <a-select v-model="filter.city" placeholder="请选择城市">
            <a-option value="北京">北京</a-option>
            <a-option value="上海">上海</a-option>
            <!-- 其他城市选项 -->
          </a-select>
        </a-form-item>
        <a-form-item label="服务人员">
          <a-input v-model="filter.servicePerson" placeholder="工号/姓名/手机号" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleSearch">查询</a-button>
          <a-button @click="handleReset">重置</a-button>
        </a-form-item>
      </a-form>
  
      <!-- 排班表 -->
      <pro-table
        :columns="columns"
        :request="fetchScheduleData"
        row-key="id"
        :pagination="pagination"
        :action-ref="setActionRef"
        :search="false"
        header-title="排班管理"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'schedule'">
            <div v-for="item in record.schedule" :key="item.time">
              <a-tag :color="item.status === '可用' ? 'green' : 'red'">{{ item.status }}</a-tag>
              <a-button type="text" @click="handleScheduleDetail(record, item)">查看</a-button>
            </div>
          </template>
        </template>
      </pro-table>
  
      <!-- 日程详情弹窗 -->
      <a-modal v-model:visible="detailVisible" title="日程详情">
        <p>日程类型：{{ detail.type }}</p>
        <p>实际开始时间：{{ detail.startTime }}</p>
        <p>实际结束时间：{{ detail.endTime }}</p>
        <p>实际时长：{{ detail.duration }}</p>
        <p>订单号：{{ detail.orderId }}</p>
        <p>地址：{{ detail.address }}</p>
      </a-modal>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref, Ref } from 'vue';
  import { getScheduleList } from '@/api/schedule'; // 假设你有一个获取排班数据的API
  
  export default defineComponent({
    name: 'ScheduleManagement',
    setup() {
      // 筛选条件
      const filter = ref({
        city: '',
        servicePerson: '',
      });
  
      // 表格列定义
      const columns = [
        { title: '服务人员姓名', dataIndex: 'name' },
        { title: '手机号', dataIndex: 'phone' },
        { title: '排班', dataIndex: 'schedule' },
      ];
  
      // 分页配置
      const pagination = ref({
        current: 1,
        pageSize: 10,
        total: 0,
      });
  
      // 日程详情
      const detailVisible = ref(false);
      const detail = ref({
        type: '',
        startTime: '',
        endTime: '',
        duration: '',
        orderId: '',
        address: '',
      });
  
      // 处理查询
      const handleSearch = () => {
        actionRef.value.reload();
      };
  
      // 处理重置
      const handleReset = () => {
        filter.value = {
          city: '',
          servicePerson: '',
        };
        actionRef.value.reload();
      };
  
      // 处理日程详情查看
      const handleScheduleDetail = (record, item) => {
        detail.value = {
          type: item.status,
          startTime: item.time,
          endTime: item.time,
          duration: '1小时',
          orderId: '123456',
          address: '北京市朝阳区',
        };
        detailVisible.value = true;
      };
  
      // 获取排班数据
      const fetchScheduleData = async (params: {
        current: number;
        pageSize: number;
      }) => {
        const response = await getScheduleList({
          ...params,
          ...filter.value,
        });
        pagination.value.total = response.data.total;
        return {
          data: response.data.list,
          success: true,
          total: response.data.total,
        };
      };
  
      // 设置actionRef
      const actionRef = ref();
      const setActionRef = (ref: Ref) => {
        actionRef.value = ref;
      };
  
      return {
        filter,
        columns,
        pagination,
        detailVisible,
        detail,
        handleSearch,
        handleReset,
        handleScheduleDetail,
        fetchScheduleData,
        setActionRef,
      };
    },
  });
  </script>